<template>
  <div class="components-container">
    <!-- 新增 修改-->
    <sweet-modal ref="dialog" class="dialog">
      <h3>{{ title }}</h3>
      <div style=" width:500px; margin:30px 50px">
        <div class="layui-form-item">
          <label class="layui-form-label">指纹名称</label>
          <div class="layui-input-block">
            <el-input v-model="fingerData.USKNAME" placeholder="请输入指纹名称"></el-input>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">选择用户</label>
          <div class="layui-input-block">
            <el-select v-model="usrName" placeholder="请选择用户" style="width:100%">
              <el-option v-for="item in users" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>

       
      <div style=" width:200px; margin:10px auto;">
         <el-button type="primary" style="margin:10px 50px"   @click="openFinger">指纹采集</el-button>
       
        <img id="bmp" width="200" height="200" style=" border:solid gray 1px;" alt="指纹图像展示" />
      </div>
      <div class="layui-form-item btnCenter">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </sweet-modal>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
<script>
  import apiBase from "@/api/apiBase.js";
  import sweetModal from "@/components/sweetModal";
  import {
    manage
  } from "@/mixins/managePage.js";
  const ADD = "新增";
  const MODIFY = "修改";
  const DELETE = "删除";
  const INFO = "详情";
  const WS_RET_ERR_OK = "0"; //操作成功
  const WS_RET_ERR_PARAM = "-1"; //参数错误
  const WS_RET_ERR_MEMORY = "-2"; //内存分配失败，没有分配到足够的内存
  const WS_RET_ERR_FUN = "-3"; //功能未实现
  const WS_RET_ERR_DEVICE = "-4"; //设备不存在
  const WS_RET_ERR_INIT = "-5"; //设备未初始化
  const WS_RET_ERR_UNKOWN = "-6"; //非法错误号
  const WS_RET_ERR_TIEMOUT = "-7"; //超时
  const WS_RET_ERR_ELSE = "-9"; //其它错误
  const FPM_MATCH_TH = 280; //比对阈值
  const WS_FPM_Init = "FPM_Init";
  const WS_FPM_Close = "FPM_Close";
  const WS_FPM_GetDevVerison = "FPM_GetDevVerison";
  const WS_FPM_GetSdkVerison = "FPM_GetSdkVerison";
  const WS_FPM_FeatureExtract = "FPM_FeatureExtract";
  const WS_FPM_GenFeature = "FPM_GenFeature";
  const WS_FPM_FeatureMatch = "FPM_FeatureMatch";
  global.fingerImage = '';
  export default {
    mixins: [manage],
    data() {
      return {
        title: null,
        fingerData: {},
        usrData: null,
        usrName: null,
        users: [],
        ws: null,
      };
    },
    methods: {
      //打开页面
      open(order, id) {
        this.order = order;
        //清理数据
        switch (this.order) {
          case ADD:
            this.title = "指纹新增";
            this.dataRepeat();
            this.getAllUser();
            this.FPM_Init();
            this.plguin_connect();
            this.$refs.dialog.open();
            break;
          case MODIFY:
            break;
          case DELETE:
            this.dataDelete(id);
            break;
          case INFO:
            break;
          default:
        }
      },
      //提交
      submit() {
        switch (this.order) {
          case ADD:
            this.dataAdd();
            break;
          case MODIFY:
            this.dataModify();
            break;
          case DELETE:
            break;
          case INFO:
            this.$refs.dialog.close();
            break;
          default:
        }
      },
      dataRepeat(){
        this.fingerData={};
        this.usrName=null;
        document.querySelector('#bmp').src=null;

      },
      dataAdd() {
        this.fingerData.USKUSRID = this.usrName;
        this.fingerData.USKCONTEXT = global.fingerImage;
        let Data = JSON.parse(JSON.stringify(this.fingerData));
        apiBase.DoService(
          Data,
          apiBase.getApiAdress().Fingerprint.Create,
          res => {
            this.$refs.dialog.close();
            this.$message({
              type: "success",
              message: "新增成功!"
            });
            this.refreshData();
          }
        );
      },
      dataDelete(id) {
        let Data = {
          USKID: id
        };
        apiBase.DoService(
          Data,
          apiBase.getApiAdress().Fingerprint.Delete,
          res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.refreshData();
          }
        );
      },
      refreshData() {
        this.$emit("refreshData");
      },
      closeDialog() {
        this.$refs.dialog.close();
      },
      getAllUser() {
        var data = {};
        apiBase.DoService(data, apiBase.getApiAdress().Fingerprint.QueryUsr, res => {
          let userData = res.data.content;
          let legendsUsersData = userData.map(item => ({
            label: item.USRNAME,
            value: item.USRID
          }));
          this.users = legendsUsersData
        });
      },
      //初始化设备
      FPM_Init() {
        var obj = {
          "reqcode": "FPM_Init"
        };
        var str = JSON.stringify(obj);
        this.plguin_send(str);
        console.log('指纹设备已初始化')
      },
      //连接  
      plguin_connect() {
        if (this.ws != null) {
          // console.log("指纹设备现已连接");  
          return;
        }
        let url = "ws://localhost:9032";
        if ('WebSocket' in window) {
          this.ws = null;
          this.ws = new WebSocket(url);
        } else if ('MozWebSocket' in window) {
          this.ws = new MozWebSocket(url);
        } else {
          console.log("unsupported WebSocket");
          return;
        }
        this.ws.onopen = function() {
          console.log("open");
          // setConnected("已连接");  
          //设置发信息送类型为：ArrayBuffer  
          this.binaryType = "arraybuffer";
        };
        //接收指纹信息
        this.ws.onmessage = function(e) {
          var s = e.data.toString();
          var obj = JSON.parse(s);
          if (obj.repcode == WS_FPM_FeatureExtract) {
            if (obj.result == WS_RET_ERR_OK) {
              document.querySelector('#bmp').src = "data:image/bmp;base64," + obj.image;
              this.strFTR1 = obj.feature;
             //保存指纹特征
              global.fingerImage = obj.feature;
            }
          } else {
            console.log("Unkown");
          }
        }
        this.ws.onclose = function(e) {
          this.ws = null;
          console.log("closed");
        }
        this.ws.onerror = function(e) {
          console.log("error");
          this.ws = null;
        }
      },
      //断开连接  
      plguin_close() {
        if (this.ws != null) {
          this.ws.close();
          this.ws = null;
          console.log("已断开");
        }
      },
      openFinger() {
        this.FPM_Init_OnClick();
        this.FPM_FeatureExtract_OnClick();
      },
      FPM_FeatureExtract_OnClick() {
        console.log('请按手指')
        var obj = {
          "reqcode": "FPM_FeatureExtract",
          "timeout": "10"
        };
        var str = JSON.stringify(obj);
        this.plguin_send(str);
      },
      FPM_Init_OnClick(){
        var obj = {"reqcode":"FPM_Init"};
        var str =JSON.stringify(obj);
        this.plguin_send(str);
      },
      FPM_GenFeature_OnClick() {
        var obt = {
          "reqcode": "FPM_GenFeature",
          "feature1": global.fingerImage,
        }
        var str = JSON.stringify(obt);
        this.plguin_send(str);
      },
      plguin_send(s) {
        if (this.ws != null) {
          this.ws.send(s);
        } else {
          console.log("[send]: ws null");
        }
      },
    },
    components: {
      sweetModal
    }
  };
</script>

